<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/shop_common :: source"></head>

<style>
    .panel-group{max-height:770px;overflow: auto;}
    .leftMenu{margin:10px;margin-top:5px;}
    .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
    .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
    .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
    .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
</style>

<body>
	<div th:include="/common/shop_common :: header"></div>
	<!--banner-->
	<div class="banner-top">
		<div class="container">
			<h2 class="animated wow fadeInLeft" data-wow-delay=".5s">Products</h2>
			<h3 class="animated wow fadeInRight" data-wow-delay=".5s">
				<a href="index.html">Home</a><label>/</label>Fruits<label>/</label>Women's
			</h3>
			<div class="clearfix"></div>
		</div>
	</div>
	
	<div th:include="/common/shop_common :: leftmenu"></div>
	<!-- contact -->
	<div style="padding:1em 0 0">
		<div class="container" style="width:1300px;height:800px">
			<div class="panel panel-default">
			    <div class="panel-heading">
			        <h3 class="panel-title">
			            <a>购物车列表</a>
			        </h3>
			    </div>
			    <div class="panel-body">
			        <div class="panel-body" style="width: 100%;height: 750px;">
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>序号</th>
									<th>订单编码</th>
									<th>商品名称</th>
									<th>订单金额</th>
									<th>折扣</th>
									<th>折后金额</th>
									<th>收货地址</th>
									<th>用户ID</th>
									<th>创建时间</th>
									<th>创建人</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody >
								<tr th:each="orders : ${orders}">
									<th th:text="${orders.id}" th:id="'order_'+${orders.id}"></th>
									<th th:text="${orders.orderCode}"></th>
									<th th:text="${orders.productName}"></th>
									<th th:text="${orders.orderMoney}"></th>
									<th th:text="${orders.discountMoney}"></th>
									<th th:text="${orders.countMoney}"></th>
									<th th:text="${orders.orderAddress}"></th>
									<th th:text="${orders.orderUserId}"></th>
									<th th:text="${#dates.format(orders.createTime,'yyyy-MM-dd HH:mm:ss')}"></th>
									<th th:text="${orders.creater}"></th>
									<th style="width:160px;">
										<button type="button" th:onclick="'javascript:payMoney(\''+${orders.id}+'\');'" class="btn btn-primary">支付</button>
										<button type="button" th:onclick="'javascript:cancleOrder(\''+${orders.id}+'\');'" class="btn btn-danger">取消订单</button>					
									</th>
								</tr>
							</tbody>
					    </table>
				    </div>
			    </div>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
	function cancleOrder(id){
		layer.confirm('确定取消订单？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/order/cancleOrder',  
		            data: {
		            	orderId:id
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	layer.msg(data.msg, {icon: 6});
		            	if(data.code=="200"){
		            		$("#order_"+id).closest("tr").children("th").remove();
		            	}
		            }  
		        });
			});
	}
	
	function payMoney(id){
		layer.confirm('确定支付订单？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/order/payOrder',  
		            data: {
		            	orderId:id
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	layer.msg(data.msg, {icon: 6});
		            	if(data.code=="200"){
		            		$("#order_"+id).closest("tr").children("th").remove();
		            	}
		            }  
		        });
			});
	}
	</script>
</body>
</html>